<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单功能</title>

<style>

* {
  margin: 0;
  padding: 0;
}

ul, li, ol {
  list-style: none;
}

body {
  background: #ebeef1;
}

.right {
  float: left;
  width: 700px;
  margin-left: 280px;
  margin-top: 20px;
}

.right .header {
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 4px;
  margin: 0 10px;
}

.question .item {
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 18px 50px 18px 20px;
  margin: 10px;
}


.question .item .title {
  display: inline-block;
  box-sizing: border-box;

  height: 38px;
  margin-left: 2px;
  border: 1px white solid;
  border-left: none;
  font-size: 15px;
  padding: 10px 8px;
}



.question .item input[type='text'] {
  border: none;
  outline: none;
  background-color: #ffffff00;
  font-size: 16px;
}

.question .item input[type='radio'] {
  margin: 0 10px 0 20px;
}

.question .item .radio {
  width: 300px;
  margin: 8px 0 0 23px;
  display: flex;
  align-items: center;
}

.question .item ul .textdiv {
  margin: 0 10px 0 0;
}


.question .item .btn-box {
  margin-top: 10px;
  margin-left: 29px;
}

.question .item .btn-box button {
  width: 80px;
  height: 30px;
  background-color: #2672ff;
  color: white;
  border: none;
  margin: 10px 20px 0 0;
  cursor: pointer;
}


</style>

<script>


function get_value(i){
	var checknode = document.getElementsByName("check"+ i);
	//获取选中的值
	if(checknode.length > 0){
		for(var i=0; i < checknode.length; i++){
			if (checknode[i].checked==true){
				 return checknode[i].value;
			}
		}
	}
	return "";
}

function get_result(){
	var list1 = [1, 3, 11, 13, 14, 15, 21, 22, 24, 26, 27, 28, 29, 34, 35, 36, 37, 38, 39, 40];
	var list2 = [2, 4, 5, 6, 7, 8, 9, 10, 12, 16, 17, 18, 19, 20, 23, 25, 30, 31, 32, 33];
	var res = 0;
	var des = "";
	for(var i=1; i < 41; i++){
		val = get_value(i);
		if (val != ""){
			
			if (list1.indexOf(i) != -1 ){
				if (val == "A"){
					res = res + 2;
				}
				if (val == "B"){
					res = res + 1;
				}
			}
			if (list2.indexOf(i) != -1 ){
				if (val == "C"){
					res = res + 1;
				}
				if (val == "D"){
					res = res + 2;
				}
			}
		}
	}
	document.getElementById("score").innerHTML = "得分："+ res;
}
</script>
</head>
<body>
  <div class="container">
      <!-- 左侧功能选项区 -->
   
      <!-- 右侧表单区 -->
      <div class="right">
          <div class="header">
              <h3>共情商</h3>
              <p>下面是一系列陈述。请仔细阅读每一项陈述，并根据你对它的认可或反对程度在选项中打勾。选项没有正确或错误之分</p>
          </div>
          <div class="question">
			 <div id="html" ></div>

		
			   <div class="item" >
				<div class="btn-box">
					<button  onclick="get_result()">提交</button>
				</div>
				<div >
				<br />
				<br />
				<p id='score' style="color:red;"></p>
				<br />
				<br />
					0～32=低（多数阿斯伯格综合征或高功能自闭症患者的得分都在20分左右）<br />
					33～52=平均范围（多数女性的分数在47分左右，多数男性的分数在42分左右）<br />
					53～63=高于平均<br />
					64～79=很高<br />
					80=最高<br />
				</div>
			  </div>

			

                  
          </div>
		 
      </div>
     
      
  </div>

<script>
var ques = [
"我能轻易看出别人是否想加入对话",
"我觉得向别人解说我能轻易理解的事很困难，除非他们一点就通",
"我很喜欢关心别人",
"我很难明白在社交场合该做什么",
"常有人说我在讨论中过份坚持自己的观点，乃至使人反感",
"和朋友约会迟到，我并不太在意",
"交朋友和谈恋爱都太难了，我还是不要费这个心思了",
"我常常难以判断某人是粗鲁还是礼貌",
"在对话中，我倾向于专注自己的想法，而不是考虑听我说话的人可能在想什么",
"我小时候很喜欢把蠕虫切开并观察结果",
"我能迅速听出别人的言下之意",
"我很难弄懂为什么别人会对有些事情特别生气",
"我很容易设想别人的立场",
"我很善于预测别人的感受",
"我能很快发现团队中的某人是否觉得尴尬或者不适",
"如果我说的话冒犯了别人，我认为那是他们的错，不是我的",
"如果别人问我喜不喜欢他们的发型，我会照实回答，就算不喜欢也会直说",
"我有时候不明白为什么有人会被一句话冒犯",
"看见别人哭，我的内心没有多少反应",
"我非常直言不讳，有人说我粗鲁，但我不是故意的",
"我不觉得社交场合会使人困惑",
"别人告诉我说，我很善于体察他们的感受和想法",
"和别人说话时，我倾向于谈论他们的体验，而不是我的",
"我在看见动物受苦时会感到难受",
"我在决策时能够不受其他人感受的影响",
"我轻易就能看出别人认为我说的话是有趣还是无聊",
"我在新闻上看到别人受难时会觉得难过",
"朋友们常会向我倾诉他们的烦恼，他们都说我善解人意",
"我能感觉到自己有没有侵入别人的领域，就算对方没有明说",
"有时候别人会对我说，我捉弄人的手段太过分了",
"别人总说我不够敏感，可我常常不明白为什么",
"在群体中看见一个陌生人时，我会认为融入群体是他的责任",
"我在看电影时一般不会投入情绪",
"我能快速的，不假思索的体会到别人的感受",
"我能轻易推测出别人想说的话",
"我能看出别人在掩饰自己的真实情绪",
"我不用刻意琢磨就能体察到社交场合的规则",
"我很擅长预测别人会怎么做",
"朋友遇到麻烦时，我的情绪也会卷入",
"我能轻易领会别人的观点，即使我并不同意他们",
];
var html = "";

for(var i=0; i < ques.length; i++){
	var j = i+1;
	html = html + '<div class="item" ><span class="count">'+j+'、</span>';
	html = html + '<div class="title">'+ ques[i] +'</div>';
	html = html + '<ul><div class="title"><input type="radio" name="check'+j+'" value="A">强烈同意</div><br>';
	html = html + '<div class="title"><input type="radio" name="check'+j+'" value="B">有点同意</div><br>';
	html = html + '<div class="title"><input type="radio" name="check'+j+'" value="C">有点反对</div><br>';
	html = html + '<div class="title"><input type="radio" name="check'+j+'" value="D">强烈反对</div><br></ul></div>';
}

document.getElementById("html").innerHTML = html;
</script>
</body>
</html>